<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>CSS で鏡餅ハガキ</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            body {
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
            }
            
            .kagamimochi-hagaki {
                position: absolute;
                width: 500px;
                height: 740px;
                margin: auto;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                box-shadow: 2px 2px 8px 0px black;
                
                background-color: white;
            }
            
            .kagamimochi-hagaki * {
                position: absolute;
                margin: 0px auto;
                left: 0px;
                right: 0px;
            }
            
            .kagamimochi {
                top: 240px;
                width: 500px;
                height: 500px;
            }
            
            .stand-00 {
                bottom: 80px;
                width: 200px;
                height: 160px;
                background-color: hsl(40, 60%, 60%);
                box-shadow: inset -2px -2px 8px 0px black;
            }
            .stand-00 .hole {
                margin: auto;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                width: 100px;
                height: 100px;
                background-color: black;
                box-shadow: inset 0px 0px 10px 4px #aaa;
                border-radius: 50px;
            }
            .stand-01 {
                bottom: 240px;
                width: 300px;
                height: 50px;
                background-color: hsl(40, 60%, 60%);
                box-shadow: inset -2px -2px 8px 0px black;
                z-index: 30;
            }
            .sankaku-00 {
                width: 0;
                height: 0;
                top: 1px;
                border-left: 120px solid transparent;
                border-right: 120px solid transparent;
                border-top: 120px solid white;
            }
            .sankaku-01 {
                width: 0;
                height: 0;
                top: 1px;
                border-left: 110px solid transparent;
                border-right: 110px solid transparent;
                border-top: 110px solid red;
            }
            .sankaku-02 {
                width: 0;
                height: 0;
                top: 1px;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top: 100px solid white;
            }
            .big-omochi {
                left: 0px;
                right: 0px;
                bottom: 280px;
                width: 250px;
                height: 80px;
                background-color: #ffc;
                box-shadow: inset -2px -2px 8px 0px black;
                border-top-left-radius: 100px;
                border-top-right-radius: 100px;
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
                /*
                border-radius: 125px/50px;
                */
                z-index: 10;
            }
            .middle-omochi {
                bottom: 345px;
                width: 160px;
                height: 80px;
                box-shadow: inset -2px -2px 8px 0px black;
                border-radius: 80px/50px;
                z-index: 20;
                
                background-color: #ffc;
            }
            .mikan {
                bottom: 410px;
                width: 60px;
                height: 50px;
                box-shadow: inset -4px -4px 16px 0px black;
                border-radius: 30px;
                border-radius: 60px/50px;
                z-index: 30;
                
                background-color: orange;
            }
            .happa {
                left: 15px;
                right: 0px;
                bottom: 450px;
                width: 25px;
                height: 15px;
                box-shadow: inset -4px -4px 16px 0px black;
                border-top-left-radius: 60%;
                border-bottom-right-radius: 60%;
                z-index: 30;
                
                background-color: green;
            }
            
            .msg {
                height: 740px;
                width: 500px;
                /*
                font-family: "標楷體", "Meiryo", Arial, Helvetica, sans-serif;
                */
                font-family: "@ＭＳ 明朝", "@ヒラギノ明朝";
                -webkit-writing-mode: vertical-rl;
                -moz-writing-mode: vertical-rl;
            }
            .akeome {
                top: 20px;
                right: 30px;
                font-size: 40px;
                font-weight: bold;
            }
            .aisatsu {
                top: 50px;
                right: 390px;
                font-size: 20px;
            }
            .hizuke {
                top: 190px;
                right: 440px;
                font-size: 20px;
            }
            .gantan {
                padding: 5px;
                width: 30px;
                top: 320px;
                right: 400px;
                background-color: red;
                border-radius: 10px;
                
                color: white;
                font-size: 20px;
                text-align: center;
                font-weight: bold;
            }
            
        </style>
        <!--[if IE]>
        <style>
            .msg {
                font-family: "標楷體", "@ＭＳ 明朝";
                writing-mode:tb-rl;
            }
        </style>
        <![endif]-->
    </head>
    <body>
        <h1>CSS で鏡餅ハガキ</h1>
        <!--
        <p>
            プレフィックスが必要な CSS3 プロパティは極力避けて作りました.
        </p>
        -->
        <div class="kagamimochi-hagaki">
            <div class="kagamimochi">
                <div class="stand-00">
                    <div class="hole"></div>
                </div>
                <div class="stand-01">
                    <div class="sankaku-00"></div>
                    <div class="sankaku-01"></div>
                    <div class="sankaku-02"></div>
                </div>
                <div class="big-omochi"></div>
                <div class="middle-omochi"></div>
                <div class="mikan"></div>
                <div class="happa"></div>
            </div>
            <div class="msg">
                <div class="akeome">あけまして<br />　おめでとう<br />　　ございます</div>
                <div class="aisatsu">本年も宜しくお願いします</div>
                <div class="hizuke">平成 二四年　</div>
                <div class="gantan">元旦</div>
            </div>
        </div>
    </body>
    
</html>